<template>
  <div>
    <x-header :left-options="{showBack: false}" @on-click-more="showMenus = true">预览</x-header>
    <div class="ui-body" v-if="showBody">
      <group gutter=0 v-if="index != questionList.length">
        <div>
          <cell :title="(index + 1) + '.   ' + questionList[index].question"></cell>
          <div v-for="(item, index1) in questionList[index].answerList" style="padding-left: 30px;">
            <div v-if="questionList[index].type === 'one'" class="ui-answer-list"  :ref="'checkboxkey' + index1" @click="checkSelect('checkboxkey' + index1, true, questionList[index].MaxSelected)">
              <input type="radio" name="answer" :id="'checkbox' + index1" :checked="answerL[index] && answerL[index][index1] ? true : false"/>
              <i class="weui-icon-checked vux-checklist-icon-checked"></i>
              <span>{{(parseInt(index1 / 26) === 0 ? $store.state.letterList[index1] : $store.state.letterList[parseInt(index1 % 26)] + parseInt(index1 / 26)) + '.   ' + item.title}}</span>
              <div class="ui-img-list">
                <img v-if='item.img[0]' :src="item.img[0]" @click.stop="showImgPath = item.img[0]">
                <img v-if='item.img[1]' :src="item.img[1]" @click.stop="showImgPath = item.img[1]">
                <img v-if='item.img[2]' :src="item.img[2]" @click.stop="showImgPath = item.img[2]">
                <img v-if='item.img[3]' :src="item.img[3]" @click.stop="showImgPath = item.img[3]">
                <i class="clearfix"></i>
              </div>
            </div>
            <div v-if="questionList[index].type === 'more'" class="ui-answer-list" @click="checkSelect('checkboxkey' + index1, false, questionList[index].MaxSelected)" :ref="'checkboxkey' + index1">
              <input type="checkbox" name="answer" :id="'radio' + index1" :checked="answerL[index] && answerL[index][index1] ? true : false"/>            
              <i class="weui-icon-checked vux-checklist-icon-checked"></i>
              <span>{{(parseInt(index1 / 26) === 0 ? $store.state.letterList[index1] : $store.state.letterList[parseInt(index1 % 26)] + parseInt(index1 / 26)) + '.   ' + item.title}}</span>
              <div class="ui-img-list">
                <img v-if='item.img[0]' :src="item.img[0]" @click.stop="showImgPath = item.img[0]">
                <img v-if='item.img[1]' :src="item.img[1]" @click.stop="showImgPath = item.img[1]">
                <img v-if='item.img[2]' :src="item.img[2]" @click.stop="showImgPath = item.img[2]">
                <img v-if='item.img[3]' :src="item.img[3]" @click.stop="showImgPath = item.img[3]">
                <i class="clearfix"></i>
              </div>
            </div>
          </div>
        </div>
      </group>
      <group v-if="index !==0 && index === questionList.length" class="ui-toupiao-complete">
        <icon type="success" is-msg></icon>
        <span style="display: block;padding-top: 40px">感谢您的参与！</span>
      </group>
      <div style="padding: 0 20px;">
        <x-button v-if="index && index !== questionList.length" type="primary" @click.native="changeQuestion('up')" style="margin-top: 40px;">上一题</x-button>
        <x-button v-if="index != questionList.length-1 && index < questionList.length-1" type="primary" @click.native="changeQuestion('down')" style="margin-top: 40px;">下一题</x-button>
        <x-button v-if="index === questionList.length-1" type="primary" @click.native="changeQuestion('down')" style="margin-top: 40px;">完成</x-button>
        <x-button v-if="index === questionList.length" type="primary" link="/" style="margin-top: 40px;">返回</x-button>
      </div>
      <div v-if="showImgPath"  @click="showImgPath = ''" class="ui-show-big-img">
        <img :src="showImgPath"></img>
      </div>
    </div>
  </div>
</template>

<script scoped>
import { Cell, Group, Picker, GroupTitle, XTextarea, XHeader, XButton, Icon } from 'vux'
import store from '@/store'
import axios from 'axios'
require('es6-promise').polyfill()

export default {
  store,
  components: {
    Picker,
    GroupTitle,
    Cell,
    Group,
    XTextarea,
    XHeader,
    XButton,
    Icon
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.$vux.loading.show({
        text: '初始化中...'
      })
      axios.get(this.$store.state.url + '/VoteManage/GetVoteDetail.ashx', {params: {ID: this.$route.params.id}})
      .then((rs) => {
        let data = rs.data
        if (data.status === 200) {
          this.$store.commit('init', data.message)
          console.log()
          this.questionList = this.$store.state.questionList
        } else {
          this.$vux.toast.text(data.tip, 'bottom')
        }
        this.$vux.loading.hide()
        this.showBody = true
      })
      .catch((response) => {
        console.log(response)
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
        this.$vux.loading.hide()
      })
    },
    checkSelect (obj, flag, MaxSelected) {
      var el = this.$refs[obj][0].childNodes[0]
      if (flag) {
        var els = document.getElementsByTagName('input')
        for (var i = 0; i < els.length; i++) {
          els[i].removeAttribute('checked')
        }
      } else {
        if (Number(MaxSelected) !== 0 && document.querySelectorAll('input:checked').length > Number(MaxSelected)) {
          el.checked = false
          this.$vux.toast.text('最多选择' + MaxSelected + '项', 'bottom')
        }
      }
      el.getAttribute('checked') ? el.removeAttribute('checked') : el.setAttribute('checked', true)
    },
    changeQuestion (flag) {
      if (flag === 'up') {
        this.index -= 1
      } else {
        var el = document.querySelectorAll('input[name=answer]')
        var i = 0
        var al = []
        for (; i < el.length; i++) {
          al.push(el[i].checked)
        }
        this.answerL.splice(this.index, 1, al)
        console.log(this.answerL)
        if (al.indexOf(true) === -1) {
          this.$vux.toast.text('请选择', 'bottom')
          return
        }
        this.index += 1
        this.checked = false
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      vm.index = 0
    })
  },
  data () {
    return {
      index: 0,
      data: [],
      checked: false,
      questionList: [],
      answerL: [],
      showImgPath: '',
      showBody: false
    }
  }
}
</script>
<style scoped>
  .ui-answer-list{
    padding-bottom: 30px;
    display: table-cell;
    vertical-align: middle;
    position: relative;
  }
  .ui-answer-list span{
    vertical-align: middle;
    word-break: break-all;
  }
  .ui-img-list{
    z-index: 999;
    position: relative;
  }
  .ui-answer-list  img{
    width: 23%;
    float: left;
    padding-top: 20px;
    margin-right: 2%;
  }
  .ui-toupiao-complete > div{
    text-align: center;
    padding: 30px;
  }
  .weui-icon-checked:before {
    content: '\EA01';
    color: #C9C9C9;
    font-size: 23px;
    display: block;
  }
  input:checked + .vux-checklist-icon-checked:before {
    content: "\EA06";
    color: #09bb07;
  }
  input{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 998;
  }
  label{
    vertical-align: middle;
  }
  .ui-show-big-img{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    z-index: 1000
  }
  .ui-show-big-img img{
    width: 90%;
    left: 5%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: fixed;
  }
</style>
